<template>
	<view class="com" :style="{height:windowHeight +'rpx',position:'relative',paddingBottom:'100rpx'}" >
	<!-- <view class="com" style="position: relative; height: 600rpx;" > -->
			<view class="con_left">
				<view :class="['con_left_item', atvid==index?'atvcol':'']" v-for="(item,index) in tabs" :key="index" v-if="item.isShow" @click="atvidFun(item,index)">
					<!-- <view class="atvcol">{{item.title}}</view> -->
					{{item.title}}
				</view>
			</view>
			<view class="con_right">
				<scroll-view scroll-view :scroll-into-view='toView' @scroll='scrollTab' scroll-y="true" :style="{height:windowHeight-100 +'rpx'}">
					<view id="A">
						<text class="con_right_title">来源渠道</text>
						<u-line color="#F5F6FA" />
						<view class="con_right_clue" v-for="(clueItem,index) in clueTrue">
							<view class="con_right_title1" >{{clueItem.name}}</view>
							<view class="clue_com" >
								<view :class="['clue_item', childrenItem.isclue?'atvcol':'']" v-for="(childrenItem,childrenIndex) in clueItem.children" @click="clueatvidFun(childrenItem)">
									{{childrenItem.name}}
								</view>
							</view>
						</view>
					</view>
					<view id="B">
						<text class="con_right_title">清洗状态</text>
						<u-line color="#F5F6FA" />
						<view class="con_right_clue">
							<!-- <view class="con_right_title1" >{{cleanItem}}</view> -->
							<view class="clue_com" >
								<view :class="['clue_item', cleanItem.isclean?'atvcol':'']" v-for="(cleanItem,index) in cleanList" @click="cleanatvidFun(cleanItem)">
									{{cleanItem.name}}
								</view>
							</view>
						</view>
					</view>
					<view id="C">
						<text class="con_right_title">创建时间</text>
						<u-line color="#F5F6FA" />
						<view class="con_right_clue">
							<view :class="timeData.createStartTime && timeData.createEndTime?'clue_com_atvtimesty':'clue_com_timesty'" @click="dateModeAction(0)">
								{{timeData.createStartTime && timeData.createEndTime ? timeData.createStartTime+ '—' +timeData.createEndTime : '请选择'}}
							</view>
							
						</view>
					</view>
					<view id="D" v-if="userInfo.role == '148'">
						<text class="con_right_title">派发时间</text>
						<u-line color="#F5F6FA" />
						<view class="con_right_clue">
							<view :class="timeData.distributeStartTime && timeData.distributeEndTime?'clue_com_atvtimesty':'clue_com_timesty'" @click="dateModeAction(1)">
								{{timeData.distributeStartTime && timeData.distributeEndTime ? timeData.distributeStartTime+ '—' +timeData.distributeEndTime : '请选择'}}
							</view>		
						</view>
					</view>
					<view id="E">
						<text class="con_right_title">分配时间</text>
						<u-line color="#F5F6FA" />
						<view class="con_right_clue">
							<view :class="timeData.assignStartTime && timeData.assignEndTime?'clue_com_atvtimesty':'clue_com_timesty'" @click="dateModeAction(2)">
								{{timeData.assignStartTime && timeData.assignEndTime ? timeData.assignStartTime+ '—' +timeData.assignEndTime : '请选择'}}
							</view>		
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="footer_btn">
				<view class="btn" @click="subFun('1')">重置</view>
				<view class="btn noteBtn" @click="subFun()">确认</view>
			</view>
			<!-- //时间组件 -->
			<date-range v-if="showMutibleDate" :mode="viewMode" :title="timeTitlt" :showMutibleDate="showMutibleDate" :startDate="startDate"
			 :endDate="endDate" @onSelected="dateSelected($event, typeDatePop)"></date-range>
	</view>
</template>

<script>
	import { getChannelTree } from "@/service/api/api.js";
	import dateRange from '@/components/zxp-datepickerRange/zxp-datepickerRange.vue';
	export default {
		props:{
			scHistoryList:{
				type:Array
			}
		},
		data() {
			let tabisShow= uni.getStorageSync('user_info').role == '148'?true:false
			return {
				windowHeight:'',
				atvid:0,
				userInfo:{},
				atvtit:'来源渠道',
				isCreateTime:false,
				toView:'A',
				timeTitlt:'',
				createParams: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				tabs:[
					{
						id:1,
						to:'A',
						isShow:true,
						title:'来源渠道',					
					},
					{
						id:2,
						to:'B',
						isShow:true,
						title:'清洗状态',					
					},
					{
						id:3,
						to:'C',
						isShow:true,
						title:'创建时间',					
					},
					{
						id:4,
						to:'D',
						isShow:tabisShow,
						title:'派发时间',					
					},
					{
						id:5,
						to:'E',
						isShow:true,
						title:'分配时间',					
					},
				],
				cleanList: [
					{
						id:1,
						name:'不限',
						isclean:false,					
					},
					{
						id:2,
						name:'待清洗',
						cleanStatus:'todo',
						isclean:false,					
					},
					{
						id:3,
						cleanStatus:'done',
						name:'已清洗',
						isclean:false,					
					},
				],
				clueTrue:[],
				//提交数据
				subFunData:{	
					isclueItem:null,// 选中线索
					iscleanItem:null,//清洗状态
					timeData:null,//时间数据
				},
				//时间数据
				timeData:{
					createStartTime:'',
					createEndTime:'',
					
					distributeStartTime:'',
					distributeEndTime:'',
					
					assignStartTime:'',
					assignEndTime:'',
				},
				startDate: '2020-01-01',
				endDate: '',
				showMutibleDate: false,
				viewMode: 'date',
				typeDatePop: '',
			
			}
		},
		components: {
			dateRange,
		},
		watch: {

		},

		created() {
			uni.getSystemInfo({
			    success:  (res)=> {
			        console.log(res,'----当前屏幕高度');
					this.windowHeight=res.windowHeight
			    }
			});
			this.userInfo = uni.getStorageSync('user_info')
			
			this.getChannelTreeFun()
		},
		methods: {
			//tab 切换
			atvidFun(data,index){
				// console.log(data,index)
				this.toView=data.to
				this.atvid=index
				this.atvtit=data.title
			},

			//tab 滚动切换
			scrollTab(){		
				let quer=uni.createSelectorQuery().in(this)
				quer.select('#A').boundingClientRect(data=>{
					if(data.top<='-203'){
						this.atvid=1
					}else{
						this.atvid=0
					}
				}).exec()
			},
			//创建时间 点击确定触发
			createTimeFun(e){
				// console.log(e,'-----------------创建时间')
			},
			dateModeAction(flag) {
				if (flag == '0') { //创建时间
					this.startDate = this.timeData.createStartTime || this.startDate
					this.endDate = this.timeData.createEndTime
					this.timeTitlt='创建时间'
				} else if (flag == '1') { //派发时间
					this.startDate = this.timeData.distributeStartTime || this.startDate
					this.endDate = this.timeData.distributeEndTime
					this.timeTitlt='派发时间'
				} else if (flag == '2') { //分配时间
					this.startDate = this.timeData.assignStartTime || this.startDate
					this.endDate = this.timeData.assignEndTime
					this.timeTitlt='分配时间'
				}
				this.typeDatePop = flag
				this.viewMode = 'date'
				this.showMutibleDate = true
			},
			
			dateSelected(e, flag) {
				if (e) {
					if (flag == '0') {
						this.timeData.createStartTime = e.start
						this.timeData.createEndTime = e.end
					} else if (flag == '1') {
						this.timeData.distributeStartTime = e.start
						this.timeData.distributeEndTime = e.end
					} else if (flag == '2') {
						this.timeData.assignStartTime = e.start
						this.timeData.assignEndTime = e.end
					}
				}
				this.showMutibleDate = false
			},
			//来源渠道 选中
			clueatvidFun(data){
				// console.log(data,data.isclue,'-------------选中线索')
				this.clueTrue=this.clueTrue.map((v,i)=>{
					if(v.children){
						for (var j = 0; j < v.children.length; j++) {
							if(v.children[j].id==data.id){
								v.children[j].isclue=!data.isclue
								if(v.children[j].isclue){
									this.subFunData.isclueItem=[
										v,
										v.children[j]
										
									]
								}
							}else{
								v.children[j].isclue=false
							}
						}
					}
					return v
				})
				this.$forceUpdate()
			},
			//清洗状态 选中
			cleanatvidFun(data){
				this.cleanList=this.cleanList.map((v,i)=>{
					if(v.id==data.id){
						v.isclean=!data.isclean
						if(v.isclean){
							this.subFunData.iscleanItem=v
						}
					}else{
						v.isclean=false
					}		
					return v
				})
				this.$forceUpdate()
			},
			// 来源渠道数据
			async getChannelTreeFun(){
				let res=await getChannelTree({
					deptId: uni.getStorageSync('user_info').userDeptId || '',
					userId: uni.getStorageSync('user_info').userId || ''
				})
				this.clueTrue=res.data.data.map((v,i)=>{
					if(v.children){
						v.children.unshift	({
							children: null,
							id: `buxian${i}`,
							isclue: true,
							name: "不限",
						})
						for (var j = 0; j < v.children.length; j++) {
							 v.children[j].isclue=false
						}						
					}
					return v
				})
				// console.log(this.clueTrue,'----------------线索数据')
			},
			//提交按钮
			// subFunData:{
			// 	isclueItem:null,// 选中线索
			// 	iscleanItem:null,//清洗状态
			//     timeData:null;时间数据
			// }
			//时间数据
			// timeData:{
			// 	createStartTime:'',
			// 	createEndTime:'',
				
			// 	distributeStartTime:'',
			// 	distributeEndTime:'',
				
			// 	assignStartTime:'',
			// 	assignEndTime:'',
			// },
			subFun(type) {
				let data={}
				if(this.subFunData.isclueItem && this.subFunData.isclueItem[1].name!='不限'){
					data['firstChannelIds']=this.subFunData.isclueItem[0].channelId
					data['secondChannelIds']=this.subFunData.isclueItem[1].channelId
					data['channelName']=this.subFunData.isclueItem[1].name
					this.$root.setStorageFun(this.subFunData.isclueItem[1].name)
				}else if(this.subFunData.iscleanItem && this.subFunData.iscleanItem.name!='不限'){
					data['cleanStatus']=this.subFunData.iscleanItem.cleanStatus
					this.$root.setStorageFun(this.subFunData.iscleanItem.name)
				}
				// 创建时间
				if(this.timeData.createStartTime && this.timeData.createEndTime){
					data['createStartTime']=this.timeData.createStartTime
					data['createEndTime']=this.timeData.createEndTime
				}else{
					data['createStartTime']=''
					data['createEndTime']=''
				}
				//派发时间
				if(this.timeData.distributeStartTime && this.timeData.distributeEndTime){
					data['distributeStartTime']=this.timeData.distributeStartTime
					data['distributeEndTime']=this.timeData.distributeEndTime
				}else{
					data['distributeStartTime']=''
					data['distributeEndTime']=''
				}
				//分配时间
				if(this.timeData.assignStartTime && this.timeData.assignEndTime){
					data['assignStartTime']=this.timeData.assignStartTime
					data['assignEndTime']=this.timeData.assignEndTime
				}else{
					data['assignStartTime']=''
					data['assignEndTime']=''
				}
				if(type==1){
					 this.resetFun()
					this.$root.clicksAllFun()
				}
				this.$root.closeDropdown(data,4)
			},
			//重置按钮
			resetFun() {
				//来源渠道重置
				this.clueTrue=this.clueTrue.map((v,i)=>{
					if(v.children){
						for (var j = 0; j < v.children.length; j++) {
							v.children[j].isclue=false 
						}
					}
					return v
				})
				//清洗状态重置
				this.cleanList=this.cleanList.map((v,i)=>{
					v.isclean=false	
					return v
				})
				//提交数据重置
				this.subFunData={	
					isclueItem:null,// 选中线索
					iscleanItem:null,//清洗状态
					timeData:null,//时间数据
				}
				//时间数据
				this.timeData={
					createStartTime:'',
					createEndTime:'',
					
					distributeStartTime:'',
					distributeEndTime:'',
					
					assignStartTime:'',
					assignEndTime:'',
				},
	

				// this.$root.closeDropdown(,4)
				this.$forceUpdate()
			}

		},
	}
</script>

<style lang="scss" scoped>
	.com{
		display: flex;
		.con_left{

			width: 20%;
			background: #F5F6FA;
			opacity: 1;
			.con_left_item{
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background: #F5F6FA;
				opacity: 1;
				font-size: 15px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				&.atvcol{
					background: #EBF3FF;
					color: #3B86FF;
				}
			}
		}
		.con_right{
			flex: 8;
			.con_right_title{
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				font-size: 36rpx;
				margin-left: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #43425D;
				opacity: 1;
			}
			.con_right_clue{
				.clue_com{
					display: flex;
					flex-wrap: wrap;
					.clue_item{
						background: #F5F5F5;
						opacity: 1;
						border-radius: 4rpx;
						padding: 16rpx 18rpx;
						margin-left: 20rpx;
						margin-top: 20rpx;
						&.atvcol{
							background: #EBF3FF;
							color: #3B86FF;
						}
					}
				}
				.clue_com_timesty{
					width: 460rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #3B86FF;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					background: #FFFFFF;
					border: 2rpx solid #3B86FC;
					opacity: 1;
					text-align: center;
					border-radius: 4rpx;
					margin: 0 auto;
				}
				.clue_com_atvtimesty{
					width: 460rpx;
					height: 60rpx;
					line-height: 60rpx;
					background: #F5F5F5;
					opacity: 1;
					border-radius: 4rpx;
					text-align: center;
					margin: 0 auto;
				}

				.con_right_title1{
					width: 100%;
					margin-top: 45rpx;
					font-size: 32rpx;
					margin-left: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #43425D;
					opacity: 0.8;
					&:nth-of-type(1){
						margin-top: 20rpx;
					}

				}
			}
		}
		.footer_btn {
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			
			background-color: #fff;
			font-family: Source Han Sans CN;
			.btn {
				flex: 1;
				height: 92rpx;
				line-height: 92rpx;
				text-align: center;
				font-family: Source Han Sans CN;
				font-size: 32rpx;
				color: #3B86FF;
				border: 2rpx solid #fff;;
				border-left: none;
				box-sizing: border-box;
			}
		
			.noteBtn {
				font-family: Source Han Sans CN;
				border: none;
				background: #3B86FF;
				color: #FFFFFF;
			}
		}
			
			
	}
</style>
